<template>
  <div class="gc-advance-search">
    <div class="open-switch">
      <i class="ri-equalizer-line" title="高级查询" @click="visible = true"></i>
      <span v-if="conditionCount > 0">{{ conditionCount }}</span>
    </div>
    <div class="reset-search-fileds" @click="resetSearchFileds">
      <i class="ri-refresh-line" title="重置查询条件"></i>
    </div>
    <el-drawer
      v-model="visible"
      :with-header="false"
      append-to-body size="320px"
      modal-class="advance-search-content">
      <div class="content">
        <div class="title">
          <p>高级查询</p>
          <i class="ri-close-fill" @click="cancelSearchForm"></i>
        </div>
        <div class="modal">
          <el-form :model="searchForm" label-position="top" ref="advanceSearchForm">
            <el-form-item
              v-for="item in filterList"
              :key="item.key"
              :label="item.name"
              :prop="item.key"
              :rules="[
                {
                  required: item.required || false,
                  message: '此项为必填项',
                  trigger: 'blur',
                }
              ]">

              <!-- input 输入框 -->
              <el-input
                v-if="item.type === 'input'"
                v-model="searchForm[item.key]"
                :placeholder="item.placeholder || '请输入'"
                :clearable="item.clearable || true" />

              <!-- radio 单选框 -->
              <el-radio-group v-if="item.type === 'radio'" v-model="searchForm[item.key]">
                <el-radio
                  v-for="el in item.options"
                  :key="el.value"
                  :label="el.value">{{ el.label }}</el-radio>
              </el-radio-group>

              <!-- select 下拉框 -->
              <el-select
                v-if="item.type === 'select'"
                v-model="searchForm[item.key]"
                :multiple="item.multiple"
                :clearable="item.clearable || true"
                :placeholder="item.placeholder || '请选择'">
                <el-option
                  v-for="itemName in item.options || []"
                  :key="itemName.value"
                  :label="itemName.label"
                  :value="itemName.value"
                />
              </el-select>

              <!-- checkbox 多选框 -->
              <el-checkbox-group v-if="item.type === 'checkbox'" v-model="searchForm[item.key]">
                <el-checkbox
                  v-for="el in item.options"
                  :key="el.value"
                  :label="el.value">{{ el.label }}</el-checkbox>
              </el-checkbox-group>

              <!-- date picker 时间选择器 -->
              <el-date-picker
                v-if="item.type === 'date'"
                v-model="searchForm[item.key]"
                :type="item.dateType"
                :placeholder="item.placeholder"
                :format="item.format"
                :value-format="item.valueFormat"
                :clearable="item.clearable || true"
                range-separator="-"
                start-placeholder="选择开始时间"
                end-placeholder="选择结束时间"
              />
            </el-form-item>
          </el-form>
        </div>
        <footer>
          <el-button @click="cancelSearchForm">取消</el-button>
          <el-button type="primary" @click="confirmSearchQuery">确定</el-button>
        </footer>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts" name="GcAdvanceSearch">
import { type PropType, ref, watchEffect, computed } from 'vue'
import type { FilterItem } from './type'
import { ElForm } from 'element-plus'
import { isBlank, deepClone, isString, isArray, isNumber } from '@/utils'

const emits = defineEmits(['get-search-params', 'reset-fileds'])
const props = defineProps({
  defaultFilter: {
    type: Object,
    default: () => {
      return {}
    }
  },

  filterList: {
    type: Array as PropType<Array<FilterItem>>,
    default: () => []
  }
})

const advanceSearchForm = ref<null | InstanceType<typeof ElForm>>(null)

const visible = ref(false)

const searchForm = ref()

watchEffect(resetAdvanceSearch)

function resetAdvanceSearch () {
  searchForm.value = deepClone(props.defaultFilter)
}

function resetSearchFileds () {
  for (const key in searchForm.value) {
    if (isString(searchForm.value[key]) || isNumber(searchForm.value[key])) {
      searchForm.value[key] = ''
    } else if (isArray(searchForm.value[key])) {
      searchForm.value[key] = []
    }
  }
  emits('reset-fileds', searchForm.value)
}

async function confirmSearchQuery () {
  const valid = await advanceSearchForm.value?.validate()
  if (valid) {
    emits('get-search-params', searchForm.value)
    visible.value = false
  }
}

function cancelSearchForm () {
  searchForm.value = deepClone(props.defaultFilter)
  visible.value = false
}

const conditionCount = computed(() => {
  let count = 0
  for (const key in props.defaultFilter) {
    if (!isBlank(props.defaultFilter[key])) {
      count += 1
    }
  }
  return count
})
</script>

<style lang="scss" scoped>
.gc-advance-search {
  display: flex;
  .open-switch {
    position: relative;
    .ri-equalizer-line {
      font-size: 16px;
      cursor: pointer;
      color: #567ced;
    }
    span {
      position: absolute;
      font-size: 12px;
      display: inline-block;
      background: #df3535;
      color: #ffff;
      width: 15px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      border-radius: 50%;
      right: -10px;
      top: -8px;
    }
  }
  .reset-search-fileds {
    margin-left: 16px;
    i {
      font-size: 16px;
      cursor: pointer;
      color: #567ced;
    }
  }
}
</style>

<style lang="scss">
 .advance-search-content {
  background-color: transparent;
   .el-drawer__body {
    padding: 0;
  }
  .content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    .title {
      display: flex;
      align-items: center;
      padding: 0 12px;
      height: 42px;
      background: #567ced;
      justify-content: space-between;
      p {
        color: #fff;
      }
      .ri-close-fill {
        color: #fff;
        font-size: 18px;
        cursor: pointer;
      }
    }
    .modal {
      height: 0;
      flex: 1;
      padding: 18px;
      .el-form {
        &-item {
          &__label {
            font-weight: 600;
            color: #000;
          }
          &__content {
            .el-select, .el-date-editor {
              width: 100%;
            }
            .el-checkbox-group {
              .el-checkbox {
                margin-right: 16px;
              }
            }
          }
        }
      }
    }
    footer {
      padding: 8px 12px;
      text-align: right;
    }
  }
}
</style>
